//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//
/* ==========================================================================
   Spacing

   Spacing classes
========================================================================== */
$important-spacing-value: if($important-spacing, ' !important', '');

// Spacing none
.spacing-inner-none {
    padding: 0 #{$important-spacing-value};
}

.spacing-inner-top-none {
    padding-top: 0 #{$important-spacing-value};
}

.spacing-inner-right-none {
    padding-right: 0 #{$important-spacing-value};
}

.spacing-inner-bottom-none {
    padding-bottom: 0 #{$important-spacing-value};
}

.spacing-inner-left-none {
    padding-left: 0 #{$important-spacing-value};
}

.spacing-outer-none {
    margin: 0 #{$important-spacing-value};
}

.spacing-outer-top-none {
    margin-top: 0 #{$important-spacing-value};
}

.spacing-outer-right-none {
    margin-right: 0 #{$important-spacing-value};
}

.spacing-outer-bottom-none {
    margin-bottom: 0 #{$important-spacing-value};
}

.spacing-outer-left-none {
    margin-left: 0 #{$important-spacing-value};
}

// Spacing small
.spacing-inner {
    padding: $spacing-small #{$important-spacing-value};
}

.spacing-inner-top {
    padding-top: $spacing-small #{$important-spacing-value};
}

.spacing-inner-right {
    padding-right: $spacing-small #{$important-spacing-value};
}

.spacing-inner-bottom {
    padding-bottom: $spacing-small #{$important-spacing-value};
}

.spacing-inner-left {
    padding-left: $spacing-small #{$important-spacing-value};
}

.spacing-outer {
    margin: $spacing-small #{$important-spacing-value};
}

.spacing-outer-top {
    margin-top: $spacing-small #{$important-spacing-value};
}

.spacing-outer-right {
    margin-right: $spacing-small #{$important-spacing-value};
}

.spacing-outer-bottom {
    margin-bottom: $spacing-small #{$important-spacing-value};
}

.spacing-outer-left {
    margin-left: $spacing-small #{$important-spacing-value};
}

// Spacing Medium
.spacing-inner-medium {
    @include get-responsive-spacing-medium($type: padding, $direction: all, $is_important: #{$important-spacing-value});
}

.spacing-inner-top-medium {
    @include get-responsive-spacing-medium($type: padding, $direction: top, $is_important: #{$important-spacing-value});
}

.spacing-inner-right-medium {
    @include get-responsive-spacing-medium($type: padding, $direction: right, $is_important: #{$important-spacing-value});
}

.spacing-inner-bottom-medium {
    @include get-responsive-spacing-medium($type: padding, $direction: bottom, $is_important: #{$important-spacing-value});
}

.spacing-inner-left-medium {
    @include get-responsive-spacing-medium($type: padding, $direction: left, $is_important: #{$important-spacing-value});
}

.spacing-outer-medium {
    @include get-responsive-spacing-medium($type: margin, $direction: all, $is_important: #{$important-spacing-value});
}

.spacing-outer-top-medium {
    @include get-responsive-spacing-medium($type: margin, $direction: top, $is_important: #{$important-spacing-value});
}

.spacing-outer-right-medium {
    @include get-responsive-spacing-medium($type: margin, $direction: right, $is_important: #{$important-spacing-value});
}

.spacing-outer-bottom-medium {
    @include get-responsive-spacing-medium($type: margin, $direction: bottom, $is_important: #{$important-spacing-value});
}

.spacing-outer-left-medium {
    @include get-responsive-spacing-medium($type: margin, $direction: left, $is_important: #{$important-spacing-value});
}

// Spacing Large
.spacing-inner-large {
    @include get-responsive-spacing-large($type: padding, $direction: all, $is_important: #{$important-spacing-value});
}

.spacing-inner-top-large {
    @include get-responsive-spacing-large($type: padding, $direction: top, $is_important: #{$important-spacing-value});
}

.spacing-inner-right-large {
    @include get-responsive-spacing-large($type: padding, $direction: right, $is_important: #{$important-spacing-value});
}

.spacing-inner-bottom-large {
    @include get-responsive-spacing-large($type: padding, $direction: bottom, $is_important: #{$important-spacing-value});
}

.spacing-inner-left-large {
    @include get-responsive-spacing-large($type: padding, $direction: left, $is_important: #{$important-spacing-value});
}

.spacing-outer-large {
    @include get-responsive-spacing-large($type: margin, $direction: all, $is_important: #{$important-spacing-value});
}

.spacing-outer-top-large {
    @include get-responsive-spacing-large($type: margin, $direction: top, $is_important: #{$important-spacing-value});
}

.spacing-outer-right-large {
    @include get-responsive-spacing-large($type: margin, $direction: right, $is_important: #{$important-spacing-value});
}

.spacing-outer-bottom-large {
    @include get-responsive-spacing-large($type: margin, $direction: bottom, $is_important: #{$important-spacing-value});
}

.spacing-outer-left-large {
    @include get-responsive-spacing-large($type: margin, $direction: left, $is_important: #{$important-spacing-value});
}

// Spacing layouts
.spacing-inner-layout {
    @include layout-spacing($type: padding, $direction: all, $device: responsive, $is_important: #{$important-spacing-value});
}

.spacing-inner-top-layout {
    @include layout-spacing($type: padding, $direction: top, $device: responsive, $is_important: #{$important-spacing-value});
}

.spacing-inner-right-layout {
    @include layout-spacing($type: padding, $direction: right, $device: responsive, $is_important: #{$important-spacing-value});
}

.spacing-inner-bottom-layout {
    @include layout-spacing($type: padding, $direction: bottom, $device: responsive, $is_important: #{$important-spacing-value});
}

.spacing-inner-left-layout {
    @include layout-spacing($type: padding, $direction: left, $device: responsive, $is_important: #{$important-spacing-value});
}

.spacing-outer-layout {
    @include layout-spacing($type: margin, $direction: all, $device: responsive, $is_important: #{$important-spacing-value});
}

.spacing-outer-top-layout {
    @include layout-spacing($type: margin, $direction: top, $device: responsive, $is_important: #{$important-spacing-value});
}

.spacing-outer-right-layout {
    @include layout-spacing($type: margin, $direction: right, $device: responsive, $is_important: #{$important-spacing-value});
}

.spacing-outer-bottom-layout {
    @include layout-spacing($type: margin, $direction: bottom, $device: responsive, $is_important: #{$important-spacing-value});
}

.spacing-outer-left-layout {
    @include layout-spacing($type: margin, $direction: left, $device: responsive, $is_important: #{$important-spacing-value});
}
